<template>
	<div class="nuxt-footer">
		<div class="footer-content">
			<div class="footer-content-left">
				<div class="footer-content-left-item">
					<div class="title">{{ t('footer.linksTitle') }}</div>
					<div class="description">
						<div
							class="description-item"
							style="cursor: pointer"
							@click="goTem('webSite')"
						>
							{{ t('footer.linkCompany') }}
						</div>
						<div class="description-item" @click="goTem('contactUs')">
							{{ t('footer.linkContact') }}
						</div>
						<div class="description-item" @click="goTem('privacyPolicy')">
							{{ t('footer.linkPrivacy') }}
						</div>
					</div>
				</div>
				<div class="footer-content-left-item">
					<div class="title">{{ t('footer.socialTitle') }}</div>
					<div class="description">
						<div
							class="description-item"
							v-for="item in socialMediaList"
							@click="goSocialMedia(item.mediaDress)"
						>
							{{ item.mediaName }}
						</div>
					</div>
				</div>
			</div>
			<div class="footer-content-right">
				<img class="login-code" :src="store.mobileCode" />
				<div class="course-operate">
					<!-- <p>{{ t("footer.enrollTitle") }}</p> -->
					<p>{{ t('footer.scanLogin') }}</p>
				</div>
			</div>
		</div>
		<div class="firm-description">
			<p>{{ t('footer.copyright') }}</p>
			<p>{{ t('footer.techSupport') }}</p>
		</div>
	</div>
</template>

<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const { $navigate } = useNuxtApp();

const store = useStore.appStore();

const props = defineProps({
	socialMediaList: {
		type: Array,
		default: [],
	},
});

const goTem = params => {
	$navigate('/web/companyIntroduction/' + params);
};

const goSocialMedia = url => {
	const fullUrl = url.startsWith('http') ? url : `https://${url}`;
	window.open(fullUrl);
};
</script>

<style lang="less" scoped>
.nuxt-footer {
	width: 100%;
	background: #1d1b1b;
	border-radius: 0px 0px 0px 0px;
	padding: 70px 113px 21px 165px;
	box-sizing: border-box;

	.footer-content {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.footer-content-left {
			display: flex;
			justify-content: flex-start;

			.footer-content-left-item {
				margin-right: 90px;

				.title {
					font-family: PingFang HK, PingFang HK;
					font-weight: 500;
					font-size: 24px;
					color: #ebecf0;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.description {
					margin-top: 12px;
					font-family: PingFang HK, PingFang HK;
					font-weight: 400;
					font-size: 18px;
					color: #ebecf0;
					text-align: left;

					.description-item {
						margin-bottom: 18px;
						cursor: pointer;
					}
				}
			}
		}

		// 右侧扫码约课
		.footer-content-right {
			padding-top: 46px;
			box-sizing: border-box;
			text-align: center;
			.login-code {
				width: 120px;
				height: 120px;
				margin-bottom: 23px;
			}

			.course-operate {
				font-family: Helvetica, Helvetica;
				font-weight: 400;
				font-size: 18px;
				color: #ebecf0;
				line-height: 30px;
				text-align: center;
				font-style: normal;
				text-transform: none;
                white-space: pre;
			}
		}
	}

	.firm-description {
		font-family: Helvetica, Helvetica;
		font-weight: 400;
		font-size: 15px;
		color: #ebecf0;
		line-height: 30px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-top: 38px;
	}
}
</style>
